<div>
  <ul class="title capital-letters bottom-tab-margin-around">
    <!-- <li>{{'Data_Visualization.Overall.Overall' | translate}}</li> -->
    <!-- <li>{{'Data_Visualization.Overall.Incident_Analytics' | translate}}</li> -->
    <!-- <li>{{'Data_Visualization.Overall.Traffic_Analytics' | translate}}</li> -->
    <li>{{'Data_Visualization.Overall.Equipment_Analytics' | translate}}</li>
  </ul>
</div>
<div class="alarmAndAlert common-header-bgc common-header-font-color">
  <div (click)="goToEquipmentAlarmList()" class="cur-p">
    <i class="iconfont icon-jinggao1" style="color: #ffffff"></i>
    <span class="capital-letters" style="background-color: #262a4c;">{{'Data_Visualization.Overall.Alarm' | translate}}：</span>
    <span class="value">{{Alarm}}</span>
  </div>
  <div (click)="goToTrafficAlert()" class="cur-p" style="display: flex; align-items: center;">
    
    <!-- <i class="iconfont icon-lingdang" style="color: #e60012"></i> -->
    <!-- <i class="iconfont icon-jinggao1" style="color: #ffffff"></i> -->
    <!-- <img src="../../../../content/images/icons/alarmformap.png" alt="" width="20px" style="color: whi;"> -->
    <!-- <svg t="1649733638933" class="icon" style="margin-right: 10px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3203" width="20" height="20"><path d="M512 14.208c274.56 0 497.792 223.168 497.792 497.792 0 274.56-223.168 497.792-497.792 497.792C237.44 1009.792 14.208 786.56 14.208 512 14.208 237.44 237.44 14.208 512 14.208z m0 71.104A427.072 427.072 0 0 0 85.312 512 427.072 427.072 0 0 0 512 938.688 427.072 427.072 0 0 0 938.688 512 427.072 427.072 0 0 0 512 85.312z m35.584 628.16v71.104H476.416v-71.04h71.168z m0-474.048v402.944H476.416V239.424h71.168z" p-id="3204" fill="#ffffff"></path></svg> -->
    <i nz-tooltip nzTitle="{{'header.alert'|translate}}" nzPlacement="bottom" 
				class="iconfont icon-lingdang font-16-rem cur-p" style="color: white">
			
			</i>
    <span class="capital-letters" style="background-color: #262a4c;">{{'Data_Visualization.Overall.Traffic_Alert' | translate}}：</span>
    <span class="value">{{TrafficAlert}}</span>
  </div>
</div>
<div nz-row class="allcontainer bottom-tab-margin-around totalArea">
  <div nz-col nzSpan="12">
    <itmp-equipment-pie titletext="VMS" [data]="vmsData"></itmp-equipment-pie>
  </div>
  <div nz-col nzSpan="12">
    <itmp-equipment-pie titletext="Video_detector" [data]="videoDetector"></itmp-equipment-pie>
  </div>
</div>
<div nz-row class="allcontainer  bottom-tab-margin-around  totalArea">
  <div nz-col nzSpan="12">
    <itmp-equipment-pie titletext="Signal_controller" [data]="signalController"></itmp-equipment-pie>
  </div>
  <div nz-col nzSpan="12">
    <itmp-equipment-pie titletext="CCTV" [data]="CCTVData"></itmp-equipment-pie>
  </div>
</div>
